<template>
  <div class="echarts_box">
    <div class="echarts_box2" ref="echarts_box"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.xData.length == 0"></Nodata>
  </div>
</template>


<script>
import fontSize from "@/modules/fontSize";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return { xData: [], ydata1: [], ydata2: [], ydata3: [], ydata4: [] };
      },
    },
    formData: {
      // 时间数据
      type: Array | Object,
      default: function () {
        return { start: this.$getLastMonth("s"), end: this.$getLastMonth("e") };
      },
    },
    orient: {
      type: String,
      default: () => "horizontal",
    },
    gridLeft: {
      type: String,
      default: "18%",
    },
    gridTop: {
      type: String,
      default: "32%",
    },
    gridRight: {
      type: String,
      default: "18%",
    },
    gridHeight: {
      type: String,
      default: "55%",
    },
    legendLeft: {
      type: String,
      default: "center",
    },
    legendTop: {
      type: String,
      default: "5%",
    },
    xAxisLine: {
      type: Boolean,
      default: true,
    },
    yAxisLine: {
      type: Boolean,
      default: true,
    },
    ySplitLine: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  watch: {
    xAxisLine: "drawLine",
    yAxisLine: "drawLine",
    ySplitLine: "drawLine",
    data: "drawLine",
    gridLeft: "drawLine",
    gridRight: "drawLine",
    gridHeight: "drawLine",
    gridTop: "drawLine",
    legendLeft: "drawLine",
    legendTop: "drawLine",
    orient: "drawLine", // 数值变化是更新图表
    // data: "drawLine", // 数值变化是更新图表
    data: function (newVal, oldVal) {
      this.drawLine();
    },
    formData: "drawLine",
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          let maxArr = [];
          // maxArr.push(...this.data.ydata1)
          // maxArr.push(...this.data.ydata2)
          // maxArr.push(...this.data.ydata3)
          // maxArr.push(...this.data.ydata4)
          maxArr
            .concat(this.data.ydata1)
            .concat(this.data.ydata2)
            .concat(this.data.ydata3)
            .concat(this.data.ydata4);
          let max = Math.max(...maxArr);
          this.temp = 0;
          var _this = this;
          let categoryArray = [];
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          let option = {
            tooltip: {
                textStyle: {
                fontSize: fontSize.fontSize(0.082),
              },
            },
            // backgroundColor: "#09252e",
            animation: false,
            grid: {
              top: this.gridTop,
              // height: this.gridHeight,
              left: this.gridLeft,
              right: this.gridRight,
              bottom: "16%", //也可设置left和right设置距离来控制图表的大小
            },
            legend: {
              padding: [12, 12, 12, 12], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
              borderColor: "rgba(85, 150, 188,0.5)", //边框颜色
              borderWidth: 1, //边框线宽
              orient: this.orient, //horizontal//横向//vertical//纵向
              show: false,
              icon: "rect",
              left: this.legendLeft,
              top: this.legendTop,
              itemHeight: 5,
              itemWidth: 15,
              textStyle: {
                color: "#fff",
                fontSize: fontSize.fontSize(0.082),
              },
            },
            xAxis: {
              data: this.data.xData,
              axisLine: {
                show: this.xAxisLine, //隐藏X轴轴线
                lineStyle: {
                  color: "rgba(79,157,229,0.5)",
                },
              },
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                // margin: 8,
                fontSize: fontSize.fontSize(0.082),
                lineHeight: fontSize.fontSize(0.11),
                textStyle: {
                  color: "rgba(255,255,255,1)", //X轴文字颜色
                },
                formatter: (value) => {
                  if (this.data.yData1.length > 2) {
                    var ret = ""; //拼接加\n返回的类目项
                    var maxLength = 10; //每项显示文字个数
                    var valLength = value.length; //X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                    if (rowN > 1) {
                      //如果类目项的文字大于4,
                      for (var i = 0; i < rowN; i++) {
                        var temp = ""; //每次截取的字符串
                        var start = i * maxLength; //开始截取的位置
                        var end = start + maxLength; //结束截取的位置
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + "\n";
                        ret += temp; //凭借最终的字符串
                      }
                      return ret;
                    } else {
                      return value;
                    }
                  } else {
                    return value;
                  }
                },
              },
            },
            yAxis: [
              {
                type: "value",
                gridIndex: 0,
                // min: 0,
                // max: max,
                interval: 25,
                // splitNumber: 4,
                splitLine: {
                  show: this.ySplitLine,
                  lineStyle: {
                    color: "rgba(79,157,229,0.2)",
                    width: 1,
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: this.yAxisLine,
                  lineStyle: {
                    color: "rgba(79,157,229,0.5)",
                  },
                },
                axisLabel: {
                  show: true,
                  margin: 8,
                  fontSize: fontSize.fontSize(0.082),

                  textStyle: {
                    color: "rgba(255,255,255,1)", //X轴文字颜色
                  },
                },
              },
            ],
            series: [
              {
                name: "内控标准",
                type: "bar",
                barWidth: 11,
                barGap: "120%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
                stack: "total",
                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "top", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "rgba(59,255,230,0.9)",
                        fontSize: fontSize.fontSize(0.082),
                        // fontWeight: 600,
                      },
                      formatter: (params) => {
                        // console.log(params)
                        return params.data + "\n" + "标准";
                      },
                    },
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(59,255,230,0.9)",
                        },
                        {
                          offset: 1,
                          color: "rgba(59,255,230,0.9)",
                        },
                      ]
                    ),
                    shadowBlur: 3,
                    shadowColor: "rgba(59,255,230,0.9)",
                  },
                },
                shadowBlur: 40,
                // shadowOffsetX: 30,
                // shadowOffsetY: 30,
                shadowColor: "red",
                data: this.data.yData1,
                // z: 10,
                // zlevel: 0,
                // label: {
                //   show: false,
                //   position: "top",
                //   distance: 10,
                //   fontSize: 16,
                //   color: "#01fff4",
                // },
              },
              // {
              //   // 分隔
              //   type: "pictorialBar",
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(9, 59, 118, 0.9)",
              //     },
              //   },
              //   symbolRepeat: "fixed",
              //   symbolMargin: 3,
              //   symbol: "rect",
              //   symbolClip: true,
              //   symbolSize: [18, 2],
              //   symbolPosition: "start",
              //   symbolOffset: [-40, 0],
              //   // symbolBoundingData: this.total,
              //   data: this.data.yData1,
              //   // width: 25,
              //   z: 0,
              //   zlevel: 1,
              // },
              // {
              //   name: "当月均值",
              //   type: "bar",
              //   barWidth: 11,

              //   itemStyle: {
              //     normal: {
              //       label: {
              //         show: true, //开启显示
              //         position: "top", //在上方显示 insideRight /top /right
              //         textStyle: {
              //           //数值样式
              //           color: "rgba(248,255,59,0.9)",
              //           fontSize: fontSize.fontSize(0.084),
              //           // fontWeight: 600,
              //         },
              //       },
              //       color: new _this.$echarts.graphic.LinearGradient(
              //         0,
              //         0,
              //         0,
              //         1,
              //         [
              //           {
              //             offset: 0,
              //             color: "rgba(248,255,59,0.9)",
              //           },
              //           {
              //             offset: 1,
              //             color: "rgba(248,255,59,0.9)",
              //           },
              //         ]
              //       ),
              //       shadowBlur: 3,
              //       shadowColor: "rgba(248,255,59,0.9)",
              //     },
              //   },
              //   data: this.data.yData2,
              //   z: 10,
              //   zlevel: 0,
              // },
              // {
              //   // 分隔
              //   type: "pictorialBar",
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(9, 59, 118, 0.9)",
              //     },
              //   },
              //   symbolRepeat: "fixed",
              //   symbolMargin: 3,
              //   symbol: "rect",
              //   symbolClip: true,
              //   symbolSize: [18, 2],
              //   symbolPosition: "start",
              //   symbolOffset: [-11, 0],
              //   // symbolBoundingData: this.total,
              //   data: this.data.yData2,
              //   width: 16,
              //   z: 0,
              //   zlevel: 1,
              // },
              {
                name: this.formData.end.substring(5, 7) + "月",
                type: "bar",
                barWidth: 11,
                barGap: "120%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "top", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "rgba(254,58,234,1)",
                        fontSize: fontSize.fontSize(0.084),
                        lineHeight: fontSize.fontSize(0.115),
                        // fontWeight: 600,
                      },
                      formatter: (params) => {
                        // console.log(params)
                        return (
                          params.data +
                          "\n" +
                          this.formData.end.substring(5, 7) +
                          "月"
                        );
                      },
                    },
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(254,58,234,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(254,58,234,1)",
                        },
                      ]
                    ),
                    shadowBlur: 3,
                    shadowColor: "rgba(254,58,234,1)",
                  },
                },
                data: this.data.yData2,
                z: 10,
                zlevel: 0,
              },
              // {
              //   // 分隔
              //   type: "pictorialBar",
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(9, 59, 118, 0.9)",
              //     },
              //   },
              //   symbolRepeat: "fixed",
              //   symbolMargin: 3,
              //   symbol: "rect",
              //   symbolClip: true,
              //   symbolSize: [18, 2],
              //   symbolPosition: "start",
              //   symbolOffset: [0, 0],
              //   // symbolBoundingData: this.total,
              //   data: this.data.yData2,
              //   width: 25,
              //   z: 0,
              //   zlevel: 1,
              // },
              {
                name: this.formData.start.substring(5, 7) + "月",
                type: "bar",
                barWidth: 11,
                barGap: "120%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "60%" /*多个并排柱子设置柱子之间的间距*/,
                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "top", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "rgba(249,163,116,0.9)",
                        fontSize: fontSize.fontSize(0.084),
                        // fontWeight: 600,
                      },
                      formatter: (params) => {
                        // console.log(params)
                        return (
                          params.data +
                          "\n" +
                          this.formData.start.substring(5, 7) +
                          "月"
                        );
                      },
                    },
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(249,163,116,0.9)",
                        },
                        {
                          offset: 1,
                          color: "rgba(249,163,116,0.9)",
                        },
                      ]
                    ),
                    shadowBlur: 3,
                    shadowColor: "rgba(249,163,116,0.9)",
                  },
                },
                data: this.data.yData3,
                z: 10,
                zlevel: 0,
              },
              // {
              //   // 分隔
              //   type: "pictorialBar",
              //   itemStyle: {
              //     normal: {
              //       color: "rgba(9, 59, 118, 0.9)",
              //     },
              //   },
              //   symbolRepeat: "fixed",
              //   symbolMargin: 3,
              //   symbol: "rect",
              //   symbolClip: true,
              //   symbolSize: [18, 2],
              //   symbolPosition: "start",
              //   symbolOffset: [40, 0],
              //   // symbolBoundingData: this.total,
              //   data: this.data.yData3,
              //   width: 25,
              //   z: 0,
              //   zlevel: 1,
              // },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  // background: red;
  height: 100%;
  position: relative;
  .echarts_box2 {
    width: 100%;
    // background: red;
    height: 100%;
    position: relative;
  }
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>